/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <div
    class="secondary-menu-model"
    :class="className"
  >
    <div class="toogle-box">
      <a
        href="javascript:"
        class="tog-close"
        @click="_toggleMenu"
        v-if="!isTogHide"
      ></a>
      <a
        href="javascript:"
        class="tog-open"
        @click="_toggleMenu"
        v-if="isTogHide"
      ></a>
    </div>
    <div
      class="leven-1"
      v-for="(item,$index) in menuList"
      :key="$index"
    >
      <div v-if="item.enabled">
        <template v-if="item.path">
          <router-link :to="{ name: item.path}">
            <div
              class="name"
              @click="_toggleSubMenu(item)"
            >
              <a href="javascript:">
                <!-- <em
                  class="fa icon"
                  :class="item.icon"
                ></em> -->
                <icon-svg
                  :icon-class="item.icon"
                  style="font-size: 20px;vertical-align: -0.25em;"
                ></icon-svg>
                <span>{{item.name}}</span>
                <em
                  class="fa angle"
                  :class="item.isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
                  v-if="item.children.length"
                ></em>
              </a>
            </div>
          </router-link>
        </template>
        <template v-if="!item.path">
          <div
            class="name"
            @click="_toggleSubMenu(item)"
          >
            <a href="javascript:">
              <!-- <em class="fa icon" :class="item.icon"></em> -->
              <icon-svg
                :icon-class="item.icon"
                style="font-size: 20px;vertical-align: -0.25em;"
              ></icon-svg>
              <span
                class="m-SubMenu"
                :title="item.name === '项目管理'?`${item.name}${projectName}项目`:`${item.name}`"
              >{{item.name}}{{ item.name === '项目管理' ? `${projectName}项目` : '' }}</span>
              <em
                class="fa angle"
                :class="item.isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
                v-if="item.children.length"
              ></em>
            </a>
          </div>
        </template>
        <ul v-if="item.isOpen && item.children.length">
          <template v-for="(el,index) in item.children">
            <router-link
              :to="{ name: el.path}"
              tag="li"
              active-class="active"
              v-if="el.enabled"
              :key="index"
            >
              <span style="font-size: 30px;vertical-align: -0.18em;margin-left: -5px;margin-right: 5px;">·</span> <span>{{el.name}}</span>
            </router-link>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import menu from './_source/menu'
  import { findComponentDownward } from '@/module/util/'

  export default {
    name: 'secondary-menu',
    data () {
      return {
        menuList: menu(this.type),
        index: 0,
        id: this.$route.params.id,
        isTogHide: false,
        isLeft: true
      }
    },
    props: {
      type: String,
      className: String
    },
    watch: {
      isTogHide (is) {
        let layoutBox = $('.main-layout-box')
        is ? layoutBox.addClass('toggle') : layoutBox.removeClass('toggle')
      }
    },
    methods: {
      _toggleSubMenu (item) {
        item.isOpen = !item.isOpen
      },
      _toggleMenu () {
        this.isTogHide = !this.isTogHide
        if (this.isTogHide) {
          sessionStorage.setItem('isLeft', 0)
        } else {
          sessionStorage.setItem('isLeft', 1)
        }

        const routeName = this.$route.name
        if (routeName === 'projects-instance-details' || routeName === 'projects-instance-details' || routeName === 'definition-create') {
          const dag = findComponentDownward(this.$root, 'dag-chart')
          dag && dag.canvasResize()
        }
      }
    },
    mounted () {
    },
    computed: {
      ...mapState('dag', ['projectName'])
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.main-layout-box {
  &.toggle {
    padding-left: 0;
    > .secondary-menu-model {
      left: -200px;
    }
  }
}
.secondary-menu-model {
  position: fixed;
  left: 20px;
  top: 60px;
  bottom: 20px;
  width: 200px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(50px);
  padding: 15px;
  .toogle-box {
    position: absolute;
    right: -1px;
    top: calc(50% - 50px);
    .tog-close {
      width: 12px;
      height: 102px;
      background: url('./_source/close.png') no-repeat;
      display: inline-block;
    }
    .tog-open {
      width: 12px;
      height: 102px;
      background: url('./_source/open.png') no-repeat;
      display: inline-block;
      position: absolute;
      right: -12px;
      top: 0;
    }
  }
  .leven-1 {
    .name {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      text-align: LEFT;
      color: #333;
      line-height: 40px;
      margin-left: 15px;
      .m-SubMenu {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      a {
        height: 40px;
        line-height: 40px;
        display: block;
        position: relative;
        padding-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        > .icon {
          vertical-align: middle;
          font-size: 15px;
          width: 20px;
          text-align: center;
          color: #33317e;
        }
        > span {
          vertical-align: middle;
          padding-left: 2px;
          font-size: 14px;
          color: #33317e;
        }
        > .angle {
          position: absolute;
          right: 12px;
          top: 12px;
        }
      }
    }
    ul {
      li {
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        padding-left: 39px;
        color: #33317e;
        a {
          font-size: 14px;
        }
        &.active {
          background: rgba(51, 49, 126, 0.1);
          border-radius: 8px;
          span {
            color: #33317e;
          }
        }
      }
    }
    > .router-link-exact-active,
    .router-link-active {
      background: #f0f6fb;
      .name {
        background: rgba(51, 49, 126, 0.1);
        border-radius: 8px;
        a {
          span {
            color: #33317e;
          }
          .fa {
            color: #33317e;
          }
        }
      }
    }
  }
}
</style>
